<template>
  <div class="Navigation">
    <!--这里要区分主菜单和子菜单样式，根据是否有children判断-->
    <el-submenu :index="navigateList.path"
                v-if="navigateList && navigateList.children && !navigateList.hidden">
      <template slot="title">
        <!-- {{navigateList.icon}} -->
        <i :class="'iconfont '+navigateList.icon"></i>
        <span>{{navigateList.meta}}</span>
      </template>
      <Navigation v-if="navigateList.children && navigateList.children.length > 0"
                  v-for="(child, index) in navigateList.children"
                  :navigateList="child"
                  :key="index" />
    </el-submenu>
    <el-menu-item :index="navigateList.path"
                  v-if="navigateList && !navigateList.children && !navigateList.hidden">
      <template slot="title">
        <i :class="navigateList.icon"></i>
        <span>{{navigateList.meta}}</span>
      </template>
      <Navigation v-if="navigateList.children && navigateList.children.length > 0"
                  v-for="(child, index) in navigateList.children"
                  :navigateList="child"
                  :key="index" />
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  props: ['navigateList'],
  data () {
    return {
      showTimeout: 0 // 菜单打开关闭延迟
    }
  }
}
</script>

<style scoped>
.Navigation {
  width: 244px;
  flex: 1;
  overflow: auto;
  color: white;
}
.Navigation .el-submenu,
.el-menu-item {
  background: #002140;
}
.Navigation li {
  width: 224px !important;
}
.el-submenu__title:hover {
  color: #fff !important;
}
.el-submenu__icon-arrow {
  right: 36px !important;
}
.el-menu-item.is-active {
  background-color: #085ce2 !important;
}
.el-menu-item:hover {
  color: #fff !important;
}
</style>
